<template>
  <div>
    <button @click="flag = !flag">点我切换盒子</button>
    <button @click="flag2 = !flag2">点我切换盒子2</button>
    <!-- 做动画两个步骤 -->
    <!-- 1. 给要加动画的盒子, 包裹一个 transition -->
    <!-- 2. 在动画类名中写样式 -->
    <transition>
      <div v-if="flag" class="box"></div>
    </transition>
    <!-- 给 transition 设置 name 属性, 作为类名的前缀替换 v- -->
    <transition name="f">
      <div v-if="flag2" class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const flag = ref(false)
const flag2 = ref(false)
</script>

<style scoped lang="less">
.box {
  width: 400px;
  height: 400px;
  background-color: yellowgreen;
}

.f-enter-from {
  opacity: 0
}

.f-enter-active, .f-leave-active {
  transition: all 1s;
  position: absolute;
}

.f-enter-to {
  opacity: 1
}

.f-leave-from {
  opacity: 1
}

.f-leave-to {
  opacity: 0;
}

.v-enter-from {
  transform: translateY(-100%);
}
.v-enter-active, .v-leave-active {
  transition: all 1s;
  position: absolute;
}
.v-enter-to {
  transform: translateY(0);
}

.v-leave-from {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
</style>